<template>
  <div class="page">
    <div class="content">
      <!-- 简介 -->
      <div class="intro" ref="intro">
        <h1>CompassClock</h1>
        <p>罗盘时钟组件。</p>
        <p>Tip: 组件提供日期格式、间距、字体大小等设置，
          请根据使用时的放置位置进行大小调整，
          若空间不足会导致内容重合，反之会留出大量空白。</p>
      </div>
      <!-- 演示 -->
      <div class="demonstration" ref="demonstration">
        <CompassClockDemo />
      </div>
      <!-- 示例代码 -->
      <div ref="code">
        <CodeContent :data-list="codeList" />
      </div>
      <!-- 属性 -->
      <div ref="attr">
        <Table v-bind="attribute" />
      </div>
      <!-- 方法 -->
      <div ref="fun">
        <Table v-bind="method" />
      </div>
      <!-- format -->
      <div ref="formatTable">
        <Table v-bind="format" />
      </div>
    </div>
    <Menu :options="menuOption" />
  </div>
</template>

<script setup>
import { ref, reactive } from "vue"

import { CompassClockDemo, compassClockCode } from "../components/demonstration"

import { attribute, format, method } from "./config/compass-clock-demo"
  defineOptions({
    name: "CompassClockDemo",
    inheritAttrs: false,
  })

const intro = ref()
const demonstration = ref()
const code = ref()
const attr = ref()
const fun = ref()
const formatTable = ref()

const menuOption = reactive([
  {
    ref: intro,
    label: "简介"
  },
  {
    ref: demonstration,
    label: "效果展示"
  },
  {
    ref: code,
    label: "示例代码"
  },
  {
    ref: attr,
    label: "属性"
  },
  {
    ref: fun,
    label: "方法"
  },
  {
    ref: formatTable,
    label: "format 可选值"
  }
])

const codeList = reactive([
  {
    label: "示例代码",
    code: compassClockCode
  },
])
</script>

<style scoped>

</style>